<template>
	<view>
		<!-- 顶部选项卡 -->
		<scroll-view 
		scroll-x="true" 
		class="scroll-row"
		:scroll-into-view="scrollInto"
		:scroll-with-animation="true">
			<view 
			class="scroll-row-item px-3 py-2 font-md"
			:class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
			v-for="(item,index) in tabBars"
			:key="index"
			:id="'tab'+index"
			@click="changeTab(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<!-- 左右滑动切换 -->
		<swiper 
		:duration="150"
		:current="tabIndex"
		@change="onChangeTab"
		:style="{height: scrollH+'px'}">
			<swiper-item
			v-for="(item,index) in newsList"
			:key="index">
				<scroll-view 
				scroll-y="true"
				:style="{height: scrollH+'px'}"
				@scrolltolower="loadmore(index)">
					<template v-if="item.list.length > 0">
						<!-- 列表模块 -->
						<block v-for="(item2, index2) in item.list" :key="index2">
							<!--话题列表组件使用-->
							<topic-list
							:item="item2" 
							:index="index2" 
							>
							</topic-list> 
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<template v-else>
						<!--无数据组件-->
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
const demo = [
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
	{
		cover: "/static/demo/topicpic/1.jpeg",
		title: "话题名称",
		desc: "话题描述",
		today_count: 0,
		news_count: 10
	},
]
//引入话题列表组件
import topicList from '@/components/news/topic-list.vue'
//引入上拉加载组件
import loadMore from '@/components/common/load-more.vue';
export default {
	//注册组件
	components: {
		topicList,
		loadMore
	},
	data() {
		return {
			//列表高度
			scrollH: 600,
			//滚动到指定位置
			scrollInto: "",
			//默认选项卡
			tabIndex: 0,
			//顶部选项卡
			tabBars: [
				{ name: "关注" },
				{ name: "推荐" },
				{ name: "体育" },
				{ name: "热点" },
				{ name: "财经" },
				{ name: "娱乐" },
				{ name: "军事" },
				{ name: "历史" },
				{ name: "军事" },
			],
			//数据列表
			newsList: [{
				list: []	
			}]
			
		}
	},
	//监听原生标题栏搜索框点击事件
	onNavigationBarSearchInputClicked() {
		//跳转到搜索页面
		uni.navigateTo({
			url: '/pages/search/search'
		})
	},
	//监听原生标题栏按钮点击事件
	onNavigationBarButtonTap(e) {
		//跳转发布页
		uni.navigateTo({
			url: '/pages/add-input/add-input'
		})
	},
	onLoad() {
		//获取系统信息
		let res = uni.getSystemInfo({
			success: res => {
				//计算列表高度
				this.scrollH = res.windowHeight - uni.upx2px(100);
			}
		});
		//根据选项生成列表数据
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			let arr = [];
			for(let i = 0; i < this.tabBars.length; i++) {
				//生成列表模板
				let obj = {
					//1.上拉加载更多 2.加载中... 3.没有更多了~
					loadmore: "上拉加载更多",
					list: []
				}
				if(i < 2) {
					obj.list = demo;
				}
				arr.push(obj);
			}
			this.newsList = arr;
		},
		//监听滑动切换
		onChangeTab(e) {
			this.changeTab(e.detail.current);
		},
		//切换选项卡
		changeTab(index) {
			if(index === this.tabIndex) {
				return;
			}
			this.tabIndex = index;
			//滚动到指定元素
			this.scrollInto = 'tab'+index;
		},
		//关注 - 接受子组件传值
		follow(index) {
			//修改索引对应列表关注状态
			this.list[index].isFollow = true;
			//提示
			uni.showToast({
				title: "关注成功"
			})
		},
		// 顶/踩操作 - 接受子组件传值
		doSupport(data) {
			// 拿到当前对象
			let item = this.list[data.index];
			// 顶/踩消息提示
			let message = data.type === "support" ? "顶" : "踩";
			// 判断之前是否已经顶/踩
			if(item.support.type === "") {
				item.support[data.type+'_count']++;
			// 若之前进行过顶操作
			}else if(item.support.type === "support" && data.type === "unsupport") {
				// 顶-1
				item.support.support_count--;
				// 踩+1
				item.support.unsupport_count++;
			// 若之前进行过踩操作
			}else if(item.support.type === "unsupport" && data.type === "support") {
				// 顶+1
				item.support.support_count++;
				// 踩-1
				item.support.unsupport_count--;
			}
			item.support.type = data.type;
			uni.showToast({
				title: message + '成功'
			});
		},
		//上拉加载更多
		loadmore(index) {
			//取到当前数据
			let currList = this.newsList[index];
			//判断是否处于可加载状态
			if(currList.loadmore !== '上拉加载更多') {
				return;
			}
			//修改加载状态
			currList.loadmore = '加载中...';
			setTimeout(() => {
				currList.list = [...currList.list,...currList.list];
				currList.loadmore = '上拉加载更多';
			}, 2000)
		}
	}
}
</script>
<style scoped>
.scroll-row {
	height: 100rpx;
}
</style>